<template>
	<view class="index-container">
		<!-- 顶部主功能区 -->
		<view class="main-feature-card">
			<image src="/static/development.png" class="main-feature-lottie"/>
			<view class="main-feature-title">定制程序</view>
			<view class="main-feature-desc">根据您的需求，量身打造专属应用/小程序/系统</view>
			<view class="main-feature-btn-circle" @click="goToCustom">
				<view class="ripple"></view>
				<view class="ripple"></view>
				<view class="ripple"></view>
				<view class="btn-icon">➔</view>
			</view>
		</view>

		<!-- 其他功能区 -->
		<view class="sub-features">
			<view class="sub-feature-card" @click="goToOrders">
				<image src="/static/myorder.png" class="sub-feature-img" mode="aspectFit" />
				<view class="sub-feature-title">我的订单</view>
			</view>
			<view class="sub-feature-card" @click="goToCases">
				<image src="/static/case.png" class="sub-feature-img" mode="aspectFit" />
				<view class="sub-feature-title">优秀案例</view>
			</view>
			<view class="sub-feature-card" @click="goToAbout">
				<image src="/static/about.png" class="sub-feature-img" mode="aspectFit" />
				<view class="sub-feature-title">关于我们</view>
			</view>
		</view>
		
		<!-- 打字机效果文字区域 -->
		<view class="typewriter-container">
			<view class="typewriter-text">{{ currentText }}</view>
		</view>

		<!-- 右下角用户悬浮按钮 -->
		<view class="user-fab" @click="goToUser">
			<image src="/static/user.png" class="user-fab-icon" mode="aspectFit" />
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 打字机文字列表
const textList = [
	"给我一份需求，还你一份完美",
	"尽心开发，满意收货",
	"可以是一个脚本，也可以是一个宏伟的系统",
	"百人级团队，技术精湛，快速交付，品质保证",
	"擅长开发各类小程序、APP、系统",
	"全程专人跟进，售后无忧服务",
	"售后30天bug免费修复，1年免费技术支持"
];

const currentText = ref('');
let currentIndex = 0;
let charIndex = 0;
let typingInterval = null;
let pauseTimeout = null;

// 打字机效果实现
const typeText = () => {
	// 清除之前的定时器
	if (typingInterval) clearInterval(typingInterval);
	if (pauseTimeout) clearTimeout(pauseTimeout);
	
	// 开始打字效果
	typingInterval = setInterval(() => {
		if (charIndex < textList[currentIndex].length) {
			// 正在打字
			currentText.value = textList[currentIndex].substring(0, charIndex + 1);
			charIndex++;
		} else {
			// 打字完成，暂停一段时间
			clearInterval(typingInterval);
			pauseTimeout = setTimeout(() => {
				// 开始删除文字
				typingInterval = setInterval(() => {
					if (charIndex > 0) {
						currentText.value = textList[currentIndex].substring(0, charIndex - 1);
						charIndex--;
					} else {
						// 删除完成，切换到下一段文字
						clearInterval(typingInterval);
						currentIndex = (currentIndex + 1) % textList.length;
						setTimeout(typeText, 500); // 切换文字前的延迟
					}
				}, 30); // 删除速度
			}, 2000); // 完整显示后暂停时间
		}
	}, 100); // 打字速度
};

onMounted(() => {
	typeText(); // 组件加载后开始打字效果
});

onUnmounted(() => {
	// 清理定时器
	if (typingInterval) clearInterval(typingInterval);
	if (pauseTimeout) clearTimeout(pauseTimeout);
});

const goToCustom = () => {
	uni.navigateTo({ url: '/pages/orders/orders' })
}
const goToOrders = () => {
	uni.navigateTo({ url: '/pages/orders/my-orders' })
}
const goToCases = () => {
	uni.navigateTo({ url: '/pages/index/case-list' })
}
const goToAbout = () => {
	uni.navigateTo({ url: '/pages/user/about' })
}
const goToUser = () => {
	uni.navigateTo({ url: '/pages/user/user' })
}
</script>

<style scoped>
.index-container {
	min-height: 100vh;
	padding: 40rpx 20rpx;
	background: linear-gradient(135deg, #18122B 0%, #120C1C 100%);
	position: relative;
}
.main-feature-card {
	background: linear-gradient(135deg, #221A36 0%, #18122B 100%);
	border-radius: 24rpx;
	box-shadow: 0 8rpx 32rpx #7B2FF244;
	padding: 60rpx 40rpx 50rpx 40rpx;
	margin-bottom: 50rpx;
	text-align: center;
	border: 1px solid #2D1457;
}
.main-feature-lottie {
	width: 140rpx;
	height: 140rpx;
	display: block;
	margin: 0 auto 24rpx auto;
}
.main-feature-title {
	font-size: 48rpx;
	font-weight: bold;
	color: #A259FF;
	margin-bottom: 20rpx;
	letter-spacing: 2rpx;
}
.main-feature-desc {
	font-size: 28rpx;
	color: #B8B8D1;
	margin-bottom: 40rpx;
}
.main-feature-btn-circle {
	position: relative;
	width: 110rpx;
	height: 110rpx;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, #7B2FF2 60%, #10AEFF 100%);
	box-shadow: 0 4rpx 16rpx #7B2FF244;
	cursor: pointer;
	overflow: visible;
}
.btn-icon {
	color: #fff;
	font-size: 48rpx;
	z-index: 2;
}
.ripple {
	position: absolute;
	border: 2rpx solid #A259FF;
	border-radius: 50%;
	width: 110rpx;
	height: 110rpx;
	left: 0;
	top: 0;
	animation: ripple-wave 2s infinite;
	opacity: 0.5;
	pointer-events: none;
}
.ripple:nth-child(2) {
	animation-delay: 0.6s;
}
.ripple:nth-child(3) {
	animation-delay: 1.2s;
}
@keyframes ripple-wave {
	0% {
		transform: scale(1);
		opacity: 0.5;
	}
	70% {
		transform: scale(1.7);
		opacity: 0.15;
	}
	100% {
		transform: scale(2);
		opacity: 0;
	}
}
.sub-features {
	display: flex;
	gap: 24rpx;
	justify-content: space-between;
}
.sub-feature-card {
	flex: 1;
	background: linear-gradient(135deg, #221A36 0%, #18122B 100%);
	border-radius: 18rpx;
	box-shadow: 0 4rpx 16rpx #7B2FF244;
	padding: 40rpx 0 32rpx 0;
	text-align: center;
	border: 1px solid #2D1457;
	transition: transform 0.2s;
}
.sub-feature-card:active {
	transform: scale(0.97);
	box-shadow: 0 2rpx 8rpx #A259FF44;
}
.sub-feature-img {
	width: 64rpx;
	height: 64rpx;
	display: block;
	margin: 0 auto 18rpx auto;
}
.sub-feature-title {
	font-size: 30rpx;
	color: #fff;
	font-weight: 500;
}
/* 打字机效果区域样式 */
.typewriter-container {
	margin-top: 50rpx;
	padding: 40rpx;
	background: linear-gradient(135deg, #221A36 0%, #18122B 100%);
	border-radius: 20rpx;
	box-shadow: 0 6rpx 24rpx #7B2FF233;
	border: 1px solid #2D1457;
}
.typewriter-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #A259FF;
	margin-bottom: 24rpx;
	text-align: center;
}
.typewriter-text {
	font-size: 30rpx;
	color: #E0E0FF;
	text-align: center;
	min-height: 40rpx;
	position: relative;
}
.typewriter-text::after {
	content: '|';
	color: #A259FF;
	animation: blink 1s infinite;
}
@keyframes blink {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}
.user-fab {
	position: fixed;
	right: 40rpx;
	bottom: 120rpx;
	width: 100rpx;
	height: 100rpx;
	background: linear-gradient(135deg, #6c76b0 0%, #7B2FF2 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 16rpx #7B2FF244;
	z-index: 100;
	transition: box-shadow 0.2s, transform 0.2s;
}
.user-fab:active {
	box-shadow: 0 2rpx 8rpx #A259FF44;
	transform: scale(0.96);
}
.user-fab-icon {
	width: 60rpx;
	height: 60rpx;
}
</style>